<template>
	<div class="list-tabs__item">
		<el-tabs>
			<el-tab-pane v-for="(item,index)  in list" :key="index" :label="item.title">
				<!-- 遍历content -->
				<el-scrollbar max-height="300px">
					<div class="container" @click="listClick(i,index1)" v-for="(i,index1) in item.content" :key="index1">
						<div class="avatar" v-if="i.avatar">
							<el-avatar size="small" :icon="(i.avatar)"></el-avatar>
						</div>

						<div class="content">
							<div v-if="i.title">
								<div>{{i.title}}</div>
								<el-tag v-if="i.tag" size="small" :type="i.tagType">
									{{i.tag}}
								</el-tag>
							</div>
							<div v-if="i.desc">{{i.desc}}</div>
							<div class="time" v-if="i.time">{{i.time}}</div>
						</div>
					</div>

					<div class="actions">
						<div class="a-item"  @click="actionCLick(aa,ai2)"  v-for="(aa,ai2) in actions" :key="ai2">
							<div class="a-icon" v-if="aa.icon">
								<component :is='`el-icon${toLine(aa.icon)}`'></component>
							</div>
							<div class="a-texrt">{{aa.text}}</div>
						</div> 
					</div>
				</el-scrollbar>
			</el-tab-pane>
		</el-tabs>
	</div>

</template>

<script lang="ts" setup>
	import { PropType } from 'vue';
	import { toLine } from '../../../utils';
	import { ListOpations, ActionOpations } from './type';
	let props = defineProps({
		list: {
			type: Array as PropType<ListOpations[]>,
			require: true
		},
		actions: {
			type: Array as PropType<ActionOpations[]>,
			default: () => []
		}
	})

	// console.log(props.list)
	// console.log(props.actions)
	// 定义分发事件
	let emits=defineEmits(['listClick','actionCLick'])
	let listClick=(item:ListOpations,index:number)=>{
		// console.log(item);
		// console.log(index)
		emits('listClick',{item,index})
	}
	
	let actionCLick=(item:ActionOpations,index:number)=>{
		// console.log(item);
		// console.log(index)
		emits('actionCLick',{item,index})
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		align-items: center;
		padding: 12px 20px;
		cursor: pointer;
		&:hover{
			background: #e6f6ff;
		}
		.avatar {
			flex: 1;
		}

		.content {
			flex: 3;

			.time {
				font-size: 12px;
				color: #999;
				margin-top: 4px;
			}
		}
	}

	.actions {
		height: 50px;
		display: flex;
		align-items: center;
		border-top: 1px;
		.a-item{
			height: 50px;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.a-icon{
			margin-right: 4px;
			position: relative;
			top: 2px;
		}
	}
	.border{
		border-right: 1px solid #eee;
	}
</style>